<div class="roles-detail">
    <div class="modules-filter">
        <pfng-filter [config]="filterConfig" (onChange)="applyFilters($event)">
        </pfng-filter>
    </div>
    <pfng-list [expandTemplate]="listExpandTemplate" [config]="listConfig" [items]="items" [itemTemplate]="itemTemplate">
        <ng-template #itemTemplate let-item="item">
            <div class="list-pf-left">
                <span class="fa fa-gear list-pf-icon list-pf-icon-small"></span>
            </div>
            <div class="list-pf-content-wrapper">
                <div class="list-pf-main-content">
                    <div class="list-pf-title">{{item.name}}</div>
                    <div class="list-pf-description text-overflow-pf">{{item.description }}</div>
                </div>
                <div class="list-pf-additional-content"></div>
            </div>
        </ng-template>
        <ng-template #listExpandTemplate let-item="item" let-index="index">
            <div class="meta">
                <div class="pfng-card card-pf card-pf-accented">
                    <div class="card-pf-heading">
                        <div class="card-heading">
                            <div class="icon-container"><span class="fa fa-info-circle fa-2x"></span></div>
                            <div class="title-text">Info</div>
                        </div>
                    </div>
                    <div class="card-pf-body card-info-body">
                        <table>
                            <tr>
                                <td>Minimum Ansible Version</td>
                                <td>{{ item.min_ansible_version }}</td>
                            </tr>
                            <tr>
                                <td>Installation</td>
                                <td>
                                    <copy-to-clipboard [copyText]="item['install_cmd']"></copy-to-clipboard>
                                </td>
                            </tr>
                            <tr *ngIf="item['hasTags']">
                                <td><i class="fa fa-tags"></i> Tags</td>
                                <td>
                                    <div class="tag" *ngFor="let tag of item['tags']">
                                        {{ tag }}
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="meta">
                <div class="pfng-card card-pf card-pf-accented">
                    <div class="card-pf-heading">
                        <div class="card-heading">
                            <div class="icon-container"><span class="fa fa-eye fa-2x"></span></div>
                            <div class="title-text">README</div>
                        </div>
                    </div>
                    <div class="card-pf-body card-info-body">
                        <div class="readme" [innerHtml]="item.readme_html"></div>
                    </div>
                </div>
            </div>
            <div class="row meta card-meta">
                <div class="col-sm-4" *ngIf="item['platforms'].length">
                    <card-platforms [platforms]="item['platforms']"></card-platforms>
                </div>
                <div class="col-sm-4" *ngIf="item['cloud_platforms'].length">
                    <card-cloud-platforms [cloudPlatforms]="item['cloud_platforms']"></card-cloud-platforms>
                </div>
                <div class="col-sm-4" *ngIf="item['dependencies'].length">
                    <card-dependencies [dependencies]="item['dependencies']"></card-dependencies>
                </div>
            </div>
        </ng-template>
    </pfng-list>
    <div class="pagination" *ngIf="items && items.length && paginationConfig.totalItems > paginationConfig.pageSize">
        <pfng-pagination [config]='paginationConfig' (onPageSizeChange)="handlePageSizeChange($event)" (onPageNumberChange)="handlePageNumberChange($event)">
        </pfng-pagination>
    </div>
</div>
<app-page-loading [loading]="loading"></app-page-loading>
